import React from 'react';
import { Row, Col, Progress } from 'antd';
import './index.less';

/**
 * @method ProgressBox
 * @prop {String} leftLabel  左边title文本
 * @prop {String} rightLabel 右边title文本
 * @prop {Array} dataSource  展示数据
 * @prop {Array[String,String]} keyValue    循环dataSource指定的key和value
 * @prop {Number} total     总数
 * @prop {Number} boxHeight  box高度，默认270
 * @prop {Function} renderLabel params:(record)
 * @prop {Function} renderRight params:(record)
 * @prop {Object} strokeColor 渐变色
 */
export default function ProgressBox(props) {
  const {
    leftLabel,
    rightLabel,
    dataSource,
    keyValue,
    total,
    boxHeight = 270,
    renderLabel = null,
    renderValue = null,
    strokeColor = null,
  } = props;
  return (
    <div className='chart-box progress-box'>
      <div className='progress-title'>
        <p>{leftLabel}</p>
        <p>{rightLabel}</p>
      </div>
      <div className='progress-box-con' style={{ height: boxHeight + 'px' }}>
        <Row>
          {dataSource.map((item, index) => {
            return (
              <Col key={index}>
                <div className='progress-title'>
                  {renderLabel ? <p>{renderLabel(item, index)}</p> : <p>{item[keyValue[0]]}</p>}
                  {renderValue ? <p>{renderValue(item, index)}</p> : <p>{item[keyValue[1]]}</p>}
                </div>
                <Progress
                  percent={Math.round((item[keyValue[1]] / total) * 100)}
                  showInfo={false}
                  strokeColor={strokeColor}
                />
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
}
